<html>
<head>
    <meta charset="utf-8">
    <title>就业情况大数据展示</title>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/static/css/comon0.css">
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/themes/macarons.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/ResizeSensor.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/zhuce.css">
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/vector.js"></script>
    <link rel="stylesheet"  href="https://assets.pyecharts.org/assets/jquery-ui.css">
    <style>
		ul {
				list-style: none;
			}
			a {
				text-decoration: none;
			}
			/*一级菜单样式, 头部导航栏以及登录注册按钮*/
			.toubu {
				position: fixed;
				min-width: 1100px;
				width: 100%;
				height: 50px;
				margin: 0px auto;
				background-color: white;
				font-size: 18px;
				font-family: 微软雅黑;
				z-index: 1000;
			}
			.toubu ul{
				height: 50px;
			}
		   .toubu ul li {
			   left: 500px;
		        float: left;
		        /*包含块*/
		        position:relative;
		    }
		    .toubu ul li a {
				display: block;
				font-size: 18px;
				width: 160px;
				height: 50px;
				line-height: 46px;
				text-align: center;
				color: black;
		        }

			.toubu ul li a:hover {
				color: black;
			   background-color: aqua;
			}
		/*二级菜单样式*/
		        .toubu ul li ul {
		        position:absolute;
		        top:50px;
		        left:-500px;
		        display:none;

		        }
				.toubu ul li ul li {
				float:none;
				}
				.toubu ul li ul li a{
				background-color: white;
				font-size: 16px;
				color: black;
				/* border-top:1px solid #ccc; */
				}
		            /*一级菜单悬停时二级菜单可见*/
		        .toubu ul li:hover ul {
		        display:block;
		        }
			.img_1{   /*logo图片设置*/
				position: absolute;
				float: left;
				top: 4px;
				left: 250px;
			}
			.logo_1{
				position: absolute;
				float: left;
				top: 9px;
				font-family: "楷体";
				font-size: 25px;
				font-weight: bold;
				left: 335px;
			}

    </style>
</head>

<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({ fontSize: whei / 20 })
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 20 })
        });
    });
</script>
<!--右下角文字滚动效果-->
<script type="text/javascript">
	$(document).ready(function(){
		var html=$(".wrap ul").html()
		$(".wrap ul").append(html)
		var ls=$(".wrap li").length/2+1
		i=0
		ref = setInterval(function(){
			i++
			if(i==ls){
				i=1
				$(".wrap ul").css({marginTop:0})
				$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
			}
	    	$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)


		},2400);
	})
</script>

<script>
    var my = {
        var_1: {{ job|safe }}
    }
    var my1 = {
        var_2: {{ job1|safe }}
    }
    var geo = {
        geo_1:{{ data2|safe }}
    }
    var job_prices = {
        job_price_index:{{ job_price_index|safe }},
        job_price:{{ job_price|safe }},
        java_cities_price:{{ java_cities_price|safe }},
        python_cities_price:{{ python_cities_price|safe }},
        web_cities_price:{{ web_cities_price|safe }},
        hadoop_cities_price:{{ hadoop_cities_price|safe }}
    }
    var job_ability = {
        abi_name:{{ abi_name|safe }},
        abi_snum:{{ abi_snum|safe }}
    }
</script>
<script src="/static/js/js.js"></script>
<body>

	    <style>.box {  z-index: 999;  }</style>
		<div class="toubu">
			<ul>
				<a href=""><img src="../static/images/J.png" alt="" class="img_1" width="70" height="40"/></a>
				<span class="logo_1">就业信息</span>
			    <li><a href="/denglu">首页</a>

		        </li>
		        <li><a href="">平台数据展</a>
		            <ul>
                        <li><a href="/test_pic">大数据展示屏</a></li>
		                <li><a href="/job_demand">各岗位技能分析</a></li>
		                <li><a href="/xinzi_bar">薪资职位分析</a></li>
						<li><a href="/pie_bar_test">各地区岗位分析</a></li>
		            </ul>
		        </li>
		        <li><a href="">其他功能</a>
                    <ul>
                        <li><a href="/xinzi_predict">岗位薪资预测</a></li>
                    </ul>
                </li>

                <li class="weather"><span id="showTime"></span></li>
                <style>
                    .weather{
                        padding: 15px;
                    }
                </style>
        <script>
            var t = null;
            t = setTimeout(time, 1000);
            function time() {
                clearTimeout(t);
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();
                var m = dt.getMinutes();
                var s = dt.getSeconds();
                document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
                t = setTimeout(time, 1000);
            }
        </script>

			</ul>
		</div>

        <div style="width: 100%; height: 50px; margin-top: 10px"></div>

    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle"><a href="/pie_bar_test" style="color: black">部分各城市招聘岗位数量图</a></div>
                    <div class="allnav" id="echart1" ></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle"><a href="/xinzi_bar" style="color: black">不同学历下的平均薪资图(单位:K)</a></div>
                    <div class="allnav" id="echart2" ></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="sy" id="fb1"></div>
                    <div class="boxfoot"></div>
                </div>
            </li>

            <li>
                <div class="map">
                    <div class="map4" id="map_1"></div>
                </div>
            </li>

            <li>
                <div class="boxall" style="height:3.4rem">
                    <div class="alltitle" style="color: black">不同岗位类型在不同城市下的平均薪资图(单位:K)</div>
                    <div class="allnav" id="echart4"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle" style="color: black">北京地区各岗位数量图</div>
                    <div class="allnav" id="echart6"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3rem">
                    <div class="alltitle" style="color: black">各大公司招聘岗位数top10</div>
                    <div class="wrap">
                        <ul>
                        {% for item in ll %}
                            <li><p style="color:black">{{ item }} </p></li>
                        {% endfor %}
                        </ul>
                    </div>
                    <div class="boxfoot" ></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="back"></div>


    <script type="text/javascript" src="/static/js/china.js"></script>
    <script type="text/javascript" src="/static/js/area_echarts.js"></script>


</body>
</html>